<template>
  <div class="sfather">
        <aside>
        <form action="" @submit.prevent="postF()">
        <img src="../assets/touxiang.jpeg" alt="">
        <input class="i1" type="text" placeholder="请输入传给父组件的内容" v-model.lazy.trim='txtF' required/>
        <input class="i2" type="submit" value="提交">
        </form>
        </aside>
        <hr>
        <hr>
        <h3>从子组件传递过来的信息</h3>
        <ul>
            <li v-for="item in smsg" :key="item">Tommy:{{item}}</li>
        </ul>
        
        <!-- 在子组件标签内，通过v-on指令调用自定义事件，触发父组件的getTxt函数 -->
    </div>
    

        <div class="d1">
            <SSon @sendtxt="getTxt" :sonmsg='fmsg'/>
        </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import SSon from './SSon.vue';

let msg = ref('');//接收子组件传递过来的数据
let smsg = reactive([]);
let fmsg =reactive([]);
let txtF = ref('');
// 事件函数:接收子组件传递过来的数据
const getTxt = (val )=>{
 msg.value = val;
 smsg.push( msg.value);
}
const postF = ()=>{
    if (txtF.value != '') {
        fmsg.push(txtF.value);
       
    }
}
</script>

<style scoped>
.sfather{
    width: 500px;
    margin: 20px auto;
    border: 3px ridge;
}
.sfather ul{
    list-style: none;
}
.sfather h3{
    margin-left: 30px;
}
.sfather h3,
.sfather li{
    color: darkcyan;
}
.sfather img{
    width: 80px;
    height: 80px;
    border-radius: 100%;
}
.sfather p {
    line-height: 80px;
}

.sfather form{
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}
.sfather aside .i1{
    line-height: 65px;
    width: 300px;
    border-radius: 8px;
    border:  1px solid dimgrey;
}
.sfather aside .i2{
    height: 65px;
    width: 70px;
    border-radius: 8px;
    background-color: darkcyan;
    color: white;
    border: 0;
}
.d1{
    width: 500px;
    margin: 20px auto;
    border: 3px ridge;
}
</style>